<template>
    <div class="pageBox">
        <TheCesiumMap />
        <div class="group-blur"></div>
        <TheLeft class="left" />
        <TheRight class="right" />
        <TheBottom class="bottom oh" />
    </div>
</template>

<script>
import TheBottom from "./component/TheBottom";
import TheLeft from "./component/TheLeft";
import TheRight from "./component/TheRight";
import TheCesiumMap from "./component/TheCesiumMap";

export default {
    name: "group",
    components: {
        TheCesiumMap,
        TheBottom,
        TheLeft,
        TheRight,
    },
};
</script>

<style lang="scss" scoped>
.pageBox {
    width: 100%;
    height: 100%;
    background: rgb(128, 127, 125);
    position: relative;
    .left {
        position: absolute;
        width: 395px;
        height: calc(100% - 280px);
        top: 0;
        // border: 1px solid red;
        left: 0;
    }

    .right {
        position: absolute;
        width: 395px;
        height: calc(100% - 280px);
        top: 0;
        // border: 1px solid red;
        right: 0;
    }
    .bottom {
        position: absolute;
        width: 100%;
        height: 280px;
        bottom: 0;
        // border: 1px solid red;
    }
}
.group-blur {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #000000 1%, transparent 30%),
        linear-gradient(to bottom, #000000 1%, transparent 5%),
        linear-gradient(to right, #000000 1%, transparent 20%),
        linear-gradient(to top, #000000 1%, transparent 35%);
}
</style>
